<template>
    <view class="uni-tabbar" style="z-index: 99;">
        <view class="uni-tabbar__item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
            <view class="icon" :class="[item.fontIcon, item.pagePath == pagePath ? 'uni-active' : '']"></view>
            <!-- 上面使用的是字体图标，解决切换页面的时候图标会闪的效果，毕竟每切换一个页面都会闪一下不太好看，可以切换使用下面的图片方式 -->

            <view v-if="true" class="uni-tabbar__bd">
                <view class="uni-tabbar__icon">
                    <image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit"
                        :src="item.selectedIconPath"></image>
                    <image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image>
                </view>
            </view>
            <view class="uni-tabbar__label" :class="{ 'active': item.pagePath == pagePath }">
                {{ item.text }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        pagePath: null
    },
    data() {
        return {
            page: 'contact',
            showPage: false,
            containerHeight: 400,
            tabbar: [
                // 这里是要动态切换的栏目，先隐藏，动态追加
                // {
                //     "pagePath": "/pages/tabBar/manage/manage",
                //     "iconPath": "/static/tabBar/home.png",
                //     "selectedIconPath": "/static/tabBar/home_col.png",
                //     "text": "管理",
                //     "fontIcon": "icon-guanli"
                // },

            ]
        };
    },
    mounted() {
        // true为判断条件，根据实际的需求替换即可
        const appRole = uni.getStorageSync('appRole');
        if (appRole === '服务人员') {
            this.tabbar.splice(1, 0,
                {
                    "pagePath": "../../pages/hashslinger/index",
                    "iconPath": "../../static/tabs/index.png",
                    "selectedIconPath": "../../static/tabs/index1.png",
                    "text": "首页",
                    "fontIcon": "icon-shouye"
                },
                {
                    "pagePath": "../../pages/hashslinger/message",
                    "iconPath": "../../static/tabs/forum.png",
                    "selectedIconPath": "../../static/tabs/forum_act.png",
                    "text": "留言互动",
                    "fontIcon": "icon-guanli"
                },
                {
                    "pagePath": "../../pages/hashslinger/profile",
                    "iconPath": "../../static/tabs/mine.png",
                    "selectedIconPath": "../../static/tabs/mine1.png",
                    "text": "我的",
                    "fontIcon": "icon-wode"
                }
            )
        }else{
            this.tabbar.splice(1, 0,
                {
                    "pagePath": "../../pages/index/index",
                    "iconPath": "../../static/tabs/index.png",
                    "selectedIconPath": "../../static/tabs/index1.png",
                    "text": "首页",
                    "fontIcon": "icon-shouye"
                },
                {
                    "pagePath": "../../pages/service/bianjiecaozuo",
                    "iconPath": "../../static/tabs/news.png",
                    "selectedIconPath": "../../static/tabs/news_act.png",
                    "text": "服务",
                    "fontIcon": "icon-shouye"
                },
                {
                    "pagePath": "../../pages/helps/index",
                    "iconPath": "../../static/tabs/forum.png",
                    "selectedIconPath": "../../static/tabs/forum_act.png",
                    "text": "帮助",
                    "fontIcon": "icon-shouye"
                },
                {
                    "pagePath": "../../pages/center/center",
                    "iconPath": "../../static/tabs/mine.png",
                    "selectedIconPath": "../../static/tabs/mine1.png",
                    "text": "我的",
                    "fontIcon": "icon-shouye"
                }
            )
        }
    },
    methods: {
        changeTab(item) {
            // 避免重复点击当前页面
            if (this.page === item.pagePath) {
                return;
            }
            
            this.page = item.pagePath;
            
            // 使用switchTab切换到tabBar页面，不会重新加载页面，保持页面状态
            uni.switchTab({
                url: item.pagePath,
                fail: () => {
                    // 如果switchTab失败(可能不是tabBar页面)，则使用navigateTo并替换当前页面
                    uni.redirectTo({
                        url: item.pagePath,
                        fail: () => {
                            // 最后的备选方案
                            uni.navigateTo({
                                url: item.pagePath
                            });
                        }
                    });
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
[nvue] uni-scroll-view,
[nvue] uni-swiper-item,
[nvue] uni-view {
    flex-direction: unset;
}

[nvue-dir-column] uni-swiper-item,
[nvue-dir-column] uni-view {
    flex-direction: unset;
}

.uni-tabbar {
    position: fixed;
    bottom: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 130upx;
    padding: 5upx 0 20upx 0;
    box-sizing: border-box;
    border-top: solid 1upx #ccc;
    background-color: #afecea;
    box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

    .uni-tabbar__item {
        display: block;
        line-height: 24upx;
        font-size: 20upx;
        text-align: center;
    }

    .uni-tabbar__icon {
        height: 42upx;
        line-height: 42upx;
        text-align: center;
    }

    .icon {
        display: inline-block;
    }

    .uni-tabbar__label {
        line-height: 24upx;
        font-size: 24upx;
        color: #999;

        &.active {
            color: #748CFF;
            font-weight: bold;
        }
    }
}

image {
    width: 42upx;
    height: 42upx;
}
</style>